<template>
  <div>
    <Header></Header> <!-- 子页面公共头部 -->
    <div class="ej_box">
      <div class="ej_center">
        <Crumbs :lmtitle="lmtitle"></Crumbs> <!-- 面包屑导航 -->
        <div class="clear"></div>
        <div class="row">

         <!-- <div class="col-md-3">
            <SeniorSearch @search="search"></SeniorSearch>
          </div>-->
          <div class="col-md-12">
            <div class="imgContainer">
              <i class="el-icon-arrow-left bigArrow"
                 @click.prevent="lastImage"
                 style="cursor: pointer"
              >
              </i>
              <div class="currentImage --el-box-shadow-dark" >
                <img :src="images[currentImage]" style="user-select: none" fit="contain" @click="previewImg(images[currentImage])"/>
              </div>
              <i class="el-icon-arrow-right bigArrow"
                 @click.prevent="nextImage"
                 style="cursor: pointer"
              >
              </i>
            </div>
            <div class="ppp">
              <p align="center">{{formData.title}}</p>
              <div align="center" class="span">
                <!--{{formData.columnName}} | -->
                作者：{{formData.author}} | 日期：{{formData.createTime}}</div>
            </div>
            <div class="previewBox">
              <i class="el-icon-arrow-left smallArrow"
                 @click.prevent="lastGroup"
                 style="cursor: pointer"

              >
              </i>
              <div class="moveContainer" ref="moveContainer">
                <!--      moveBox用来移动-->
                <div class="moveBox" ref="moveBox">
                  <!--        previewContainer用来保持缩略图排列-->
                  <div class="previewContainer" ref="previewContainer">
                    <div v-for="(item,index) in images"
                         :class="[currentImage===index?'selected':'','previewImageContainer']"
                         :key="item"
                         :ref="item"
                    >
                      <el-image :src="item"
                                class="previewImage"
                                fit="cover"
                                @click="clickPreview(index)"
                      >
                      </el-image>
                    </div>
                  </div>
                </div>
              </div>
              <i  class="el-icon-arrow-right smallArrow"
                  @click.prevent="nextGroup"
                  style="cursor: pointer"
              >
              </i>
            </div>
           <!-- <div class="ej_content_box">
              <div class="ej_content">
                <div class="ej_content_nav">
                  <div class="ej_content_nav_pc">
                    <h2 class="ej_content_nav_pc_h2dt">
                      <template v-for="item in dhData">
                        <li class="activexz" v-if="formData.columnId == item.id">{{item.name}}</li>
                      </template>
                      &lt;!&ndash; <li v-for="item in dhData"  @click="link(item.id)"
                        :class="formData.columnId == item.id?'activexz':''">{{item.name}}</li> &ndash;&gt;
                    </h2>

                    <div class="clearfix"></div>
                  </div>
                </div>

                <div class="ej_content_editor">

                  <div class="swiper mySwiper2">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="item in formData.url">
                        <img :src="item.url"/>
                        <div class="ppp">
                          <p>{{formData.title}}</p>
                          <div class="span">{{formData.columnName}} | 作者：{{formData.author}} | 日期：{{formData.createTime}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-button-next mySwiper2next"></div>
                    <div class="swiper-button-prev mySwiper2prev"></div>
                  </div>
                  <div thumbsSlider="" class="swiper mySwiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="item in formData.url">
                        <img :src="item.url" />
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>-->
          </div>

          <div class="clearfix"></div>
        </div>


      </div>
      <el-dialog
        :append-to-body="true"
        :close-on-click-modal="true"
        title="图片预览"
        :visible.sync="dialogVisible"
        width="80%">
        <img :src="clickImg" mode="scaleToFill" style="width: 100%;height: auto;object-fit: cover;">
      </el-dialog>
    </div>
    <Foot></Foot> <!-- 网站公共底部 -->
  </div>
</template>
<script>
import Swiper from "swiper";
import 'swiper/dist/css/swiper.css'
import Foot from "@/components/foot.vue";
import Crumbs from "@/components/crumbs.vue";
import SeniorSearch from "@/components/seniorsearch.vue";
import Cookies from 'js-cookie'
import { contentApiqueryOne } from "@/api/webviews";
import Header from "@/components/header.vue";
export default {
  name: "jcsjdetails",
  components: {
    Header,
    Crumbs,
    SeniorSearch,
    Foot
  },
  data() {
    return {
      clickImg: '',
      dialogVisible: false,
      images:[],
      currentImage:0,
      boxImageNum:0,
      dhData: [],
      ParentId: '',
      lmtitle: '精彩瞬间',
      formData: {},
      lunbo:''
    };
  },
  created() {
    this.dhData = JSON.parse(Cookies.get('navdata'))[this.$route.query.navId]
    this.getdata(this.$route.query.id)
  },
  mounted() {
    /*const swiper = new Swiper('.mySwiper', {
        spaceBetween:10,
        slidesPerView:6,
        freeMode: true,
        watchSlidesProgress: true,
        observer:true,
        observeParents:true
    })


    new Swiper(".mySwiper2", {
      spaceBetween: 10,
      thumbs: {
        swiper: swiper
      },
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',


        observer:true,
        observeParents:true,

    });*/
  },
  methods: {
    previewImg(path){
      console.log("路径是：",path);
      this.dialogVisible = true
      this.clickImg = path;
    },
    handleClose(done) {
      done()
      /*this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});*/
    },
    lastImage(){
      if(this.currentImage){
        --this.currentImage
      }
      //缩略图右移动
      if(this.currentImage >=Math.floor(this.boxImageNum/2) && this.currentImage!==this.images.length-1){
        this.$refs.moveBox.style.left=-(this.currentImage-Math.floor(this.boxImageNum/2))*120+"px"
      }
    },
    nextImage(){
      if(this.currentImage!==this.images.length-1){
        ++this.currentImage
      }
      //缩略图左移动
      if(this.currentImage > this.boxImageNum/2 && this.currentImage !== this.images.length-1){
        this.$refs.moveBox.style.left=-(this.currentImage-Math.floor(this.boxImageNum/2))*120+"px"

      }
    },
    //缩略图右移动
    lastGroup(){
      if(this.$refs.moveBox.offsetLeft!==0){
        if(Math.abs(this.$refs.moveBox.offsetLeft)>=this.$refs.moveContainer.offsetWidth/2){
          this.previewMoveRight(this.$refs.moveContainer.offsetWidth/2)
        } else {
          this.previewMoveRight(Math.abs(this.$refs.moveBox.offsetLeft))
        }
      }

    },
    //缩略图左移动
    nextGroup(){
      if(!(Math.abs(this.$refs.moveBox.offsetLeft)+this.$refs.moveContainer.offsetWidth/2 >= this.$refs.moveBox.offsetWidth)){
        this.previewMoveLeft(this.$refs.moveContainer.offsetWidth/2)
      }
    },
    //缩略图左移动
    previewMoveLeft(size){
      this.$refs.moveBox.style.left=this.$refs.moveBox.offsetLeft-size+"px"
    },
    //缩略图右移动
    previewMoveRight(size){
      this.$refs.moveBox.style.left=this.$refs.moveBox.offsetLeft+size+"px"
    },

    clickPreview(index){
      this.currentImage=index
    },
    getdata(id) {
      contentApiqueryOne({ id: id })
        .then((res) => {
          if (res.code == 0) {

            res.data.createTime = res.data.createTime.split(" ")[0]
            let urls = res.data.url.split(",")
            let arrya = []
            /*arrya = urls.map((item, index) => {
              return { name: index, url: '/show' + item }
            })
            this.formData.url = arrya*/
            this.images = []
            this.images = urls.map((item, index) => {
              return '/show' + item
            })
            this.$refs.previewContainer.style.width=this.images.length*120+"px"
            this.boxImageNum=this.$refs.moveContainer.offsetWidth/120
            this.formData = res.data
            /*console.log(this.formData);
            console.log("this.images",this.images);*/
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    link(id) {
      /*this.$router.push({
        name: 'articlelistpage',
        query: { navId: this.$route.query.navId, id: id }
      })*/

      let routeData = this.$router.resolve({
        name: 'articlelistpage',
        query: { navId: this.$route.query.navId, id: id }
      })
      window.open(routeData.href, '_blank')
    },
    search(val){
      /*this.$router.push({
          name: 'searchresult',
          query:{formdata: JSON.stringify(val)}
      })*/
      let routeData = this.$router.resolve({
        name: 'searchresult',
        query:{formdata: JSON.stringify(val)}
      })
      window.open(routeData.href, '_blank')
    },
  },
};
</script>
<style scoped>
@import "../assets/css/font/iconfont.css";
@import "../assets/css/index.css";
@import "../assets/css/style.css";
.swiper {
        width: 100%;
        height: 100%;
      }
    .ppp{position: relative;height: 70px;width: 100%;background-color: #DBDBDB;bottom: 0;text-align: left;color: #017FE7;padding: 10px 0;margin: 10px 0px;}
    .ppp p{width: 96%;height: auto;margin: 0 2%;font-weight: bold;}
    .ppp .span{display: block;width: 96%;height: auto;margin: 0 2%;float: left;color: #017FE7;}
      .swiper-slide {
      	position: relative;
        text-align: center;

        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 600px;
        object-fit: cover;
      }



      .swiper {
        width: 100%;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
      }

      .swiper-slide {
        background-size: cover;
        background-position: center;
      }

      .mySwiper2 {
        height: 80%;
        width: 100%;
        overflow: hidden;
        position: relative;
      }

      .mySwiper {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
      }

      .mySwiper .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
      }

      .mySwiper .swiper-slide-thumb-active {
        opacity: 1;
      }

      /*.swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }*/
      .mySwiper .swiper-slide img {
        height: 120px;
      }
      /* .mySwiper2next{
        right: 40px;
      } */
      .swiper-button-prev, .swiper-button-next{
        color: #fff !important;
      }


.imgContainer{
  width: 100%;
  background-color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-sizing: border-box;
  margin-bottom: 40px;
  margin-top: 40px;
  padding: 40px 10px;
  display: flex;
  align-items: center;
}
.currentImage{
  width: 100%;
  height: 450px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin: auto;
  overflow: hidden;
}
.currentImage el-image{
 /* width: 800px;*/
  height: 450px;
}
.currentImage img{
  height: 450px;
}
.previewBox{
  width: 100%;
  height: 100px;
  position: relative;
  background-color: white;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bigArrow{
  font-size: 50px;
  color: #525252;
}
.smallArrow{
  font-size: 30px;
  color: #525252;
}
.moveContainer{
  width: 100%;
  height: 88px;
  overflow: hidden;
  position: relative;
  z-index: 10000;
}
.moveBox{
  position: absolute;
  transition: 0.5s;
}
.previewContainer{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.previewImageContainer{
  width:100px;
  border: 1px solid #9b9a9a;
  border-radius: 3%;
  margin: 0 5px;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.previewImage{
  height: 70px;
  width: 90px;
  user-select: none;
}
.selected{
  border: 4px solid #3388fb;
}
</style>
